<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style  type="text/css">
       body{
           background: #000;
           text-align: center;
       }
       h1{
           color:#fff;
       }
       .box{
           width: 500px;
           height: 500px;
           margin:-200px auto 0;
           background: url(./w.gif) no-repeat;
           background-size: 100% 100%;
       }
       .content{
           font-size: 36px;
           color: #fff;
           margin-top: 400px;
    }
    button{
        margin-top: 20px;
        font-size: 24px;
    }
    @-webkit-keyframes fadeInOut {
    0% {
        opacity:0;
     }
    25% {
        opacity:0.1;
    }
    50% {
        opacity: 0.25;    
    }
    75% {
        opacity:0.5;
    } 
    90% {
        opacity:0.75;
    } 
    100% {
        opacity:1;
    }}
    .info{
    color: #fff;
    align-items: center;
    width: 500px;
    height: 500px;
    position:absolute;    
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation-name: fadeInOut;
    animation-timing-function: ease-in-out;
    animation-duration: 5s;
   animation-direction: alternate;
    }

    @keyframes myfirst2{
    0% {
        top:0;
        left:0;
        transform: rotate(0deg);
     }
    50% {
        left: 50%;
        top: 50%;
        transform: rotate(180deg);
    }
    100% {
        left: 0;
        top: 100%;
        transform: rotate(360deg);
    }
    }


    .image{
        width: 300px;
        height: 300px;
        position: absolute;
	    animation: myfirst2 3s linear ;
    }
    .image img{
        width: 100%;
        height: 100%;
    }
    .show{
        display: block;
    }
    .hidden{
        display: none;
    }
    </style>
</head>
<body>
    <div class="content" >
        您准备好了吗？
        <button class="btn">点击开始</button>
     
    </div>
    <div class="box hidden" >
        <h1>正在努力new中...............</h1>
    </div>
    <div class="info hidden">
        <div class="image">
            <img src="./img.jpg" alt="上海鲜花港 - 郁金香"></img>
        </div>
        <div style="margin-left: 300px;">
            <p>姓名：杨芬</p><div class=""></div>
            <p>性别：女</p>
            <p>年龄：21</p>
            <p>身高：170cm</p>
            <p>体重：45Kg</p>
            <p>兴趣爱好：...........</p>
        </div>
    </div>
    <script>
       var content= document.querySelector(".content")
       var box= document.querySelector(".box")
       console.log(box.classList);
       document.querySelector(".btn").addEventListener("click",()=>{
           var i=3
         const inter=  setInterval(()=>{
            content.innerHTML=i--
            if(i===0){
                clearInterval(inter)
                box.classList.remove("hidden")
               
                setTimeout(() => {
                    box.classList.add("hidden")
                    document.querySelector(".info").classList.remove("hidden")
                }, 2000);
            }
           },1000)
        
       })
      
    </script>
</body>

</html>